<template>
  <ve-modal title="取消订单" v-model="visible" cancelText="取消" @close="visible = false" @confirm="onConfirm">
    <ve-form :model="form" ref="formRef">
      <view class="invalid-tips">订单取消后，未发起的合同也将会无效，确认是否作废当前订单？</view>
      <ve-form-item prop="refundAmount" label="退款" unit="元">
        <ve-input-number v-model="form.refundAmount" />
      </ve-form-item>
      <ve-form-item label="违约金" unit="元">
        <ve-input-number v-model="form.breachAmount" />
      </ve-form-item>
      <ve-form-item label="备注" labelPosition="top" :borderBottom="false">
        <ve-input type="textarea" v-model="form.cancelRemark" placeholder="请输入备注" />
      </ve-form-item>
    </ve-form>
  </ve-modal>
  <ve-toast ref="toast" />
</template>
<script setup>
  import { ref } from 'vue'
  import { calcPriceAPI, cancelOrderAPI } from '@/api/order/lOrder'
  const emit = defineEmits(['ok'])

  const visible = ref(false)
  const form = ref({})
  const open = (record) => {
    visible.value = true
    form.value = {
      id: record.id,
      refundAmount: record.totalAmount,
    }
    // 获取默认违约金
    const param = {
      type: 4,
      id: record.id,
    }
    calcPriceAPI(param).then((res) => {
      const result = res.result
      form.value.breachAmount = result.breachAmount
    })
  }
  // 点击确认
  const formRef = ref()
  const toast = ref()
  const onConfirm = () => {
    cancelOrderAPI(form.value).then(() => {
      visible.value = false
      toast.value.show({
        title: '操作成功',
        type: 'success',
      })
      emit('ok')
    })
  }
  defineExpose({
    open,
  })
</script>
<style lang="less" scoped></style>
